<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Iframe Content</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.min.js"></script>
<style>
  html,
  body {
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
  }

  video {
    height: 98.5% !important;
    width: 100% !important;
    cursor: pointer;
    /* Add cursor style to indicate it's clickable */
  }
</style>

<body>
  <video id="video" autoplay controls></video>


  <script>
    var video = document.getElementById('video');
    // var videoSrc = 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv';

    document.addEventListener("DOMContentLoaded", function () {
      // 添加监听消息的事件
      window.addEventListener("message", function (event) {
        console.log('event.data', event.data.videoUrl);
        if (event.data && event.data.type === "videoUrl") {

          // 更新video标签的src
          // document.getElementById("video").src = 'http://192.168.2.1/preview/1.live.flv'
          if (flvjs.isSupported()) {
            var flvPlayer = flvjs.createPlayer({
              type: 'flv',
              url: event.data.videoUrl
            });
            flvPlayer.attachMediaElement(video);
            flvPlayer.load();
            flvPlayer.play();
          }
        }
      });

    });

  </script>
</body>
<script src="http://bilibili.github.io/flv.js/dist/flv.js"></script>

</html>